frontend/pages/e/[uuid]/waitingList.tsx (view raw)
1import {useState, useMemo, PropsWithChildren} from 'react';
2import EventLayout, {TabComponent} from '../../../layouts/Event';
3import {EventByUuidDocument} from '../../../generated/graphql';
4import useProfile from '../../../hooks/useProfile';
5import WaitingList from '../../../containers/WaitingList';
6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
7import pageUtils from '../../../lib/pageUtils';
8
9interface NewPassengerDialogContext {
10 addSelf: boolean;
11}
12
13interface Props {
14 eventUUID: string;
15 announcement?: string;
16}
17
18const Page = (props: PropsWithChildren<Props>) => {
19 return <EventLayout {...props} Tab={WaitingListTab} />;
20};
21
22const WaitingListTab: TabComponent = ({event}) => {
23 const {userId} = useProfile();
24 const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
25 useState<NewPassengerDialogContext | null>(null);
26
27 const canAddSelf = useMemo(() => {
28 if (!userId) return false;
29 const isInWaitingList = event?.waitingPassengers?.data?.some(
30 passenger => passenger.attributes.user?.data?.id === `${userId}`
31 );
32 const isInTravel = event?.travels?.data?.some(travel =>
33 travel.attributes.passengers?.data?.some(
34 passenger => passenger.attributes.user?.data?.id === `${userId}`
35 )
36 );
37 return !(isInWaitingList || isInTravel);
38 }, [event, userId]);
39
40 return (
41 <>
42 <WaitingList
43 canAddSelf={canAddSelf}
44 getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
45 toggleNewPassengerToWaitingList({addSelf})}
46 />
47 {!!addPassengerToWaitingListContext && (
48 <AddPassengerToWaitingList
49 open={!!addPassengerToWaitingListContext}
50 toggle={() => toggleNewPassengerToWaitingList(null)}
51 addSelf={addPassengerToWaitingListContext.addSelf}
52 />
53 )}
54 </>
55 );
56};
57
58export const getServerSideProps = pageUtils.getServerSideProps(
59 async (context, apolloClient) => {
60 const {uuid} = context.query;
61 const {host = ''} = context.req.headers;
62 let event = null;
63
64 // Fetch event
65 try {
66 const {data} = await apolloClient.query({
67 query: EventByUuidDocument,
68 variables: {uuid},
69 });
70 event = data?.eventByUUID?.data;
71 } catch (error) {
72 return {
73 notFound: true,
74 };
75 }
76
77 return {
78 props: {
79 eventUUID: uuid,
80 metas: {
81 title: event?.attributes?.name || '',
82 url: `https://${host}${context.resolvedUrl}`,
83 },
84 },
85 };
86 }
87);
88
89export default Page;